<template>
  <view class="page-container">
    <u-navbar back-icon-color="#FFF" title="进度追踪" title-color="#FFF" :background="{
					background: '#00a0e9',
				}">
    </u-navbar>
    <view class="search-view">
      <u-search shape="square" input-align="center"
                @search="search"
                placeholder="搜索标题" v-model="keyword"
                :show-action="false"></u-search>
    </view>
    <div class="content">
      <scroll-view scroll-y class="progress-list"
                   @scrolltolower="viewScroll"
                   refresher-enabled
                   :refresher-triggered="triggered"
                   @refresherrefresh="refresh">
        <view class="progress-item" v-for="it in hasDoInData.taskList" :key="it.ID" @click="openTask(it)">
          <p class="title">{{ it.TITLE }}</p>
          <p class="desc">
            <span class="from">来自：{{ it.USER_USERNAME }}</span>
            <span class="date">时间：{{ it.BEGINTIME }}</span>
            <span class="progress" @click.stop="routeTo({
                            link:'progress',
                            params:{
                              openStatus:9,
                              taskId:it.ID
                            }
                        })">进度</span>
          </p>
        </view>
      </scroll-view>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      page: 1,
      triggered: false
    }
  },
  computed: {
    hasDoInData() {
      return this.$store.state.hasDoInData
    }
  },
  methods: {
    search() {
      this.refresh()
    },
    async viewScroll(e) {
      this.triggered = true
      this.page++;
      await this.$store.dispatch('getHasDoIndex', {
        page: this.page,
        loadMore: true,
        query: this.keyword
      })
      this.triggered = false
    },
    async refresh() {
      this.triggered = true
      this.page = 1
      await this.$store.dispatch('getHasDoIndex', {
        page: this.page,
        query: this.keyword
      })
      this.triggered = false
    },
    openTask(it) {
      this.routeTo({
        link: 'approve',
        params: {
          id: it.ID,
          title: it.TITLE,
          openStatus: 9
        }
      })
    }
  },
  onLoad() {
    this.refresh()
  }
}
</script>

<style lang="less">
.search-view {
  padding: 20rpx;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 0;
  background: #FFF;

  .progress-list {
    height: 100%;
    flex: 1;

    .progress-item {
      position: relative;
      border-bottom: 1px solid #acacac;
      padding: 28rpx;

      .title {
        font-size: 28rpx;
        color: #000;
        margin-bottom: 10rpx;
        word-break: break-all;
      }

      .desc {
        color: #999;
        font-size: 24rpx;

        margin-top: 20rpx;

        span:nth-child(1) {
          margin-right: 1em;
        }
      }

      .progress {
        z-index: 2;
        text-align: center;
        border-radius: 10rpx;
        position: absolute;
        background-color: #5f8ab5;
        color: #ffffff;
        border: 0;
        height: 50rpx;
        width: auto;
        line-height: 50rpx;
        font-size: 28rpx;
        padding: 0rpx 38rpx;
        bottom: 20rpx;
        right: 20rpx;
      }
    }
  }

}

</style>
